<template>
  <div>
    <div class="list" v-for="item in zufang" :key="item.title" @click="tiaozhuan">
      <div class="pic">
        <img :src="url+item.houseImg" alt />
      </div>
      <div class="text">
        <p class="title">{{item.title}}</p>
        <span>{{item.desc}}</span>
        <div class="biaoqian">{{item.tags[0]}}</div>
        <div class="price">
          <span>{{item.price}}</span>元/月
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoHomeListApi } from '@/api/goHome'
export default {
  name: 'VuecliWorkGoHomeList',

  created () {
    this.getZuFang()
  },

  data () {
    return {
      // 接收数据
      zufang: [],
      url: ''

    }
  },
  // 方法
  methods: {
    // 向后台请求地址
    async getZuFang () {
      try {
        const res = await getGoHomeListApi()
        console.log(res)
        this.zufang = res.data.body.list
        this.url = res.config.baseURL
      } catch (e) {
        console.log(e)
      }
    },
    tiaozhuan () {
      this.$router.push('/details')
    }

  }
}
// activated () {
//   this.getZuFang()
// },
// deactivated () {
//   this.goHomeList = {}
// }

</script>

<style lang="less" scoped>
.list {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #999;
  margin-left: 15px;
  width: 345px;
  height: 120px;
  .pic {
    width: 106px;
    height: 80px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .text {
    margin-left: 12px;
    .title {
      font-size: 15px;
      font-weight: 700;
      color: #333;
    }
    span {
      font-size: 12px;
      color: #b7b9ba;
    }
    .biaoqian {
      font-size: 12px;
      width: 46px;
      height: 20px;
      background-color: #e1f5f8;
      color: #52c5d3;
      text-align: center;
    }
    .price {
      font-size: 12px;
      color: #fa705d;
      span {
        font-size: 16px;
        color: #fa705d;
        font-weight: 700;
      }
    }
  }
}
</style>
